<!--  -->
<template>
  <div class="infoview">
    <el-button type="primary" size="small" style="margin-left: 20px" @click="exitSplit" v-if="showExitButton">退出分屏</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showExitButton: true
    }
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created() {
    this.$bus.$emit('updateShowStreetScape', true)
  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    this.showExitButton = true
    window.updateMarker = (position) => {
      this.updateMarker(position)
    }

    this.graphicLayer = new this.mars3d.layer.GraphicLayer()
    this.map.addLayer(this.graphicLayer)
    this.map.on(this.mars3d.EventType.click, this.onClickMap)
  },
  beforeDestroy() {
    this.graphicLayer.remove()
    this.map.off(this.mars3d.EventType.click, this.onClickMap)
  },
  methods: {
    updateMarker(position) {
      if (this.markerStreet) {
        this.markerStreet.position = position
      } else {
        this.markerStreet = new this.mars3d.graphic.BillboardEntity({
          position: position,
          style: {
            image: 'img/marker/street.png',
            scale: 1,
            horizontalOrigin: this.Cesium.HorizontalOrigin.CENTER,
            verticalOrigin: this.Cesium.VerticalOrigin.BOTTOM,
            clampToGround: true
          }
        })
        this.graphicLayer.addGraphic(this.markerStreet)
      }

      this.map.flyToGraphic(this.markerStreet, { radius: 800 })
    },

    onClickMap(event) {
      const point = this.mars3d.LatLngPoint.fromCartesian(event.cartesian)
      const streeScape = document.getElementById('streeScape')
      streeScape.contentWindow.setPosition(point)
    },
    exitSplit() {
      // 关闭街景框
      this.$bus.$emit('updateShowStreetScape', false)

      // 恢复css
      const dom3d = document.getElementById('mars3d-container')
      dom3d.style.width = ''
      dom3d.style.left = ''

      dom3d.style.display = ''
      this.showExitButton = false

      // 展示主功能菜单
      document.getElementById('mainMenu').style.display = ''

      this.$bus.$emit('selectMenu', '0')

      this.graphicLayer.remove()
    }
  }
}
</script>
<style scoped>
/* @import url(); 引入css类 */
.infoview {
  position: absolute;
  width: 120px;

  top: 20px;
  /* border: 1px solid rgba(128, 128, 128, 0.5); */
  color: #ffffff;
  /* background: rgba(0, 0, 0, 0.5); */
  z-index: 19870100;
}
</style>
